<template>
  <div class="notice-manage">
    <RouteTitle isBack />
    <a-table
      style="margin-top: 10px"
      :dataSource="dataSource"
      :columns="columns"
      :scroll="{ x: 1500 }"
      :loading="loading"
      rowKey="id"
      :pagination="false"
    >
      <template #bodyCell="{ column, record }">

        <template v-if="column.key === 'title'">
            <span class="title_blue" style="cursor: pointer; hover"  @click="viewNoticce(record.id)">{{ record.title }}</span>
        </template>

        <template v-if="column.key === 'action'">
          <a-space>
            <a-button type="link" @click="viewNoticce(record.id)"
              >查看</a-button
            >
          </a-space>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script>
import { reactive, toRefs, createVNode, defineComponent, computed } from "vue";
import { PlusOutlined } from "@ant-design/icons-vue";
import request from "../../../common/utils/request";
import { message, Modal } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";

export default {
  name: "NoticeManage",
  components: {
    PlusOutlined,
  },
  setup() {
    const state = reactive({
      dataSource: [],

      columns: [
        {
          title: "标题",
          dataIndex: "title",
          key: "title",
          width: 600,
        },
        {
          title: "发布时间",
          dataIndex: "push_date",
          key: "push_date",
        },
        {
          title: "操作",
          dataIndex: "action",
          key: "action",
        },
      ],

      visible: false,
      noitceId: 0,
      loading: false,

      page: 1,
      pageSize: 10,
      total: 0,
    });

    const getNoticeList = () => {
      state.loading = true;
      request.get("/work_ai", "/user/shotstack/notice/list").then((res) => {
        state.loading = false;
        state.dataSource = res.result;
      });
    };
    getNoticeList();

    const viewNoticce = (id) => {
      window.open(
        `${window.location.origin}/custom/textPreview?id=${id}&type=notice`
      );
    };

    return {
      ...toRefs(state),
      viewNoticce,
    };
  },
};
</script>

<style lang="less" scoped>
.notice-manage {
  width: 100%;
  min-height: 100%;
}
.title_blue:hover{
  color: blue;
}
</style>
